<template>
  <div class="fuli">
    <!--福利 -->
    <h6>
      <img src="../../../assets/img/yl-img/zx/zx_111.jpg" alt="" />{{ fuli }}
    </h6>
    <ul class="fl">
      <li v-for="welfare in gettypeval" :key="welfare.id" @click="goBofang1(welfare.id)">
        <img :src="welfare.img" />
        <p>{{ welfare.name }}</p>
      </li>
      <!-- <li>
          <img src="../../../assets/img/yl-img/fls/fls_21.jpg" alt="" />
          <p>嘉南传💕先婚后爱</p>
          
        </li>
        <li>
          <img src="../../../assets/img/yl-img/fls/fls_24.jpg" alt="" />
          <p>霞光·谍战剧黑马</p>
          
        </li>
        <li>
          <img src="../../../assets/img/yl-img/fls/fls_26.jpg" alt="" />
          <p>您好!母亲大人</p>
          
        </li> -->
    </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Fuli",
  props: ["fuli", "type"],
  data() {
    return {
      welfares: [],
      kv: {
        精选热门福利: "fuli",
        "本周三上新-ip福利特惠": "shangxin",
        环球福利: "huanqiu",
      },
       gettypeval:[]
    };
  },
   methods:{
   goBofang1(welfare){
      this.$router.push("/bofang-1/"+welfare);
      // this.$router.push("/bookdetail/01001");
    },
      gettype(val){
      val.forEach(x => {
        if(x.type == this.type){
          this.gettypeval.push(x);
        }
      });
      }
  },
  created() {
    axios({
      url: "/vip/welfares",
      params: {
        type: this.kv[this.fuli],
      },
    }).then((res) => {this.welfares = res.data;
    this.gettype(this.welfares);
    });
  },
};
</script>

<style scoped>
.fuli {
  margin-left: 0.15rem;
}
.fl {
  width: 3.83rem;
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.12rem;
}
.fl li {
  width: 50%;
  margin-bottom: 0.2rem;
  color: white;
  /* background-color: yellow; */
}
.fl img {
  width: 1.9rem;
  height: 1.1rem;
  display: block;
}
.fl li p {
  font-size: 0.14rem;
  margin-top: 0.1rem;
  margin-bottom: 0.08rem;
  color: black;
}
h6 {
  font-size: 0.17rem;
  padding-top: 0.3rem;
  width: 100%;
  height: 0.18rem;
  color: black;
  /* background-color: royalblue; */
}
</style>